<!DOCTYPE html>
<html class="html-01-1">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<link type="text/css" href="mystyle.css" rel="stylesheet" />
		<title>01学生签到-手机端</title>
		<style>
			/*最大屏幕1024样式*/
		@media only screen and (max-width:1024px ) {
			.img2-01-1{
				margin-left: 67%;
			}
			.div3-01-1{
				width: 70%;
				height: 130%;
				position: relative;
				left: -9px;
			}
			.p1-01-1{
				position: relative;
				left: 30%;
			}
			.p2-01-1{
				font-size:72px ;
				position: relative;
				left: 14%;
				top: 20%;
			}
			.p3-01-1{
				font-size: 34px ;
				position: relative;
				top: 180px;
				left: 38.5%;
				visibility: visible;
			}
			.input1-01-1{
				width: 650px;
				position: relative;
				top: 180px;
				left: 14%;
			}
			.span1-01-1{
				position: relative;
				top: 183px;
				left: 18%;
			}
			.input2-01-1{
				width: 650px;
				position: relative;
				top: 180px;
				left: 13.5%;
			}
			.span2-01-1{
				position: relative;
				top: 183px;
				left: 18%;
			}
			.button-01-1{
				width: 650px;
				position: relative;
				top: 180px;
				left: 14%;
			}
		}
		/*最大屏幕768px样式*/
		@media only screen and (max-width: 768px) {
			.p1-01-1{
				position: relative;
				left: 21.5%;
			}
			.div3-01-1{
				width: 50%;
				height: 100%;
				position: relative;
				left: -3.5px;
			}
			.img2-01-1{
				margin-left: 48%;
				
			}
			.p2-01-1{
				font-size:54px ;
				position: relative;
				left: 15%;
				top: 80px;
			}
			.p3-01-1{
				font-size: 24px ;
				position: relative;
				top: 70px;
				left: 37.5%;
				visibility: visible;
			}
			.input1-01-1{
				width: 480px;
				position: relative;
				top: 63px;
				left: 14.5%;
			}
			.span1-01-1{
				position: relative;
				top: 67px;
				left: 18%;
			}
			.input2-01-1{
				width: 480px;
				position: relative;
				top: 70px;
				left: 14%;
			}
			.span2-01-1{
				position: relative;
				top: 73px;
				left: 18%;
			}
			.button-01-1{
				width: 480px;
				position: relative;
				top: 80px;
				left: 14.5%;
			}
		}
		/*最大屏幕414px样式*/
		@media only screen and (max-width:414px) {
			.img2-01-1{
				margin-left: 25%;
			}
			.p1-01-1{
				position: relative;
				left: 9.5%;
			}
			.p2-01-1{
				font-size: 34px;
				position: relative;
				left: 9%;
				top:50px;
			}
			.p3-01-1{
				font-size: 16px ;
				position: relative;
				top: 25px;
				visibility: visible;

			}
			.div3-01-1{
				width: 28%;
				height: 60%;
				position: relative;
				left: -32px;
				top: 5px;
			}
			.input1-01-1{
				width: 315px;
				height: 50px;
				font-size: 30px;
				position: relative;
				top: 20px;
				left: 8%;
				text-indent: 60px;
			}
			.span1-01-1{
				position: relative;
				top: 27px;
				left: 14%;
			}
			.input2-01-1{
				width: 315px;
				height: 50px;
				font-size: 30px;
				position: relative;
				top: 20px;
				left: 7%;
				text-indent: 60px;
			}
			.span2-01-1{
				position: relative;
				top: 27px;
				left: 14%;
			}
			.button-01-1{
				font-size: 30px;
				width: 320px;
				height: 59px;
				position: relative;
				top: 20px;
				left: 8%;
			}
		}
		/*最大屏幕375px样式*/
		@media only screen and (max-width:375px ) {
			.p1-01-1{
				position: relative;
				left: 7.6%;
			}
			.p2-01-1{
				font-size: 30px;
				position: relative;
				top: 45px;
				left: 10%;
			}
			.p3-01-1{
				font-size: 16px ;
				position: relative;
				left: 31%;
				visibility: visible;
			}
			.div3-01-1{
				width: 25%;
				position: relative;
				left: -31px;
				top: 5px;
			}
			.img2-01-1{
				margin-left: 22%;
			}
			.img3-01-1{
				width: 30px;
				height: 30px;
			}
			.img4-01-1{
				width: 30px;
				height: 30px;
			}
			.input1-01-1{
				width: 290px;
				font-size: 26px;
				position: relative;
				left: 8%;
			}
			.input2-01-1{
				width: 290px;
				font-size: 26px;
				position: relative;
				left: 7%;
			}
			.button-01-1{
				width: 300px;
				font-size: 26px;
				position: relative;
				left: 6%;
			}
		}
		@media only screen and (max-width:360px ) {
			.img2-01-1{
				margin-left: 21.5%;
			}
			.div3-01-1{
				position: relative;
				left: -38.3px;
			}
		}
		/*最大屏幕320px样式*/
		@media only screen and (max-width:320px) {
			.p1-01-1{
				position: relative;
				left: 6.4%;
			}
			.div3-01-1{
				width: 22%;
				height: 47%;
				position: relative;
				left: -37px;
			}
			.img2-01-1{
				position: relative;
				top: -155px;
				margin-left: 18.5%;
				
			}
			.img3-01-1{
				width: 25px;
				height: 25px;
			}
			.img4-01-1{
				width: 25px;
				height: 25px;
			}
			.p2-01-1{
				font-size: 24px;
				position: relative;
				top: 10px;
				left: 14%;
			}
			.p3-01-1{
				position: relative;
				top:-10px;
				visibility: visible;
			}
			.span1-01-1{
				position: relative;
				top: -4px;
			}
			.span2-01-1{
				position: relative;
				top: -6px;
			}
			.input1-01-1{
				width: 245px;
				height: 35px;
				font-size: 22px;
				position: relative;
				left: 12%;
				top: -10px;
			}
			.input2-01-1{
				width: 245px;
				height: 35px;
				font-size: 22px;
				position: relative;
				left: 10%;
				top: -10px;
			}
			.button-01-1{
				width: 250px;
				height: 35px;
				font-size: 22px;
				position: relative;
				left: 8%;
				top: -10px;
			}
		}
		</style>
	</head>

	<body class="body-01-1">
		<div class="div1-01-1">
			<a href="#"><img class="img1-01-1" src="img/img1-01-student.png" /></a>
			<p class="p1-01-1">课程签到</p>
			<a href="#"><img class="img2-01-1" src="img/img2-01-student.png"/></a>
		</div>
		<div class="div2-01-1">
			<div class="div3-01-1">
				<p class="p2-01-1">一体化教学管理平台</p>
				<div>
				<p class="p3-01-1" >用户名不存在</p>
				<span class="span1-01-1" ><img class="img3-01-1" src="img/img3-01-student.png"/></span>	
				<input class="input1-01-1" type="text" placeholder="学号" value="20171505098" />
				</div>
				<div>
				<span class="span2-01-1" ><img class="img4-01-1" src="img/img4-01-student.png"/></span>
				<input class="input2-01-1" type="text" placeholder="姓名" />
				</div>
				<button class="button-01-1">签到</button>
			</div>
		</div>
	</body>

</html>